<template>
  <div class="nav-bar">
    <div class="nav-width">
      <!--nav-->
      <el-menu theme="dark" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">{{ title }}</el-menu-item>
        <el-submenu index="2">
          <template slot="title">快速通道</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">我的工作台</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-submenu>
        <el-menu-item class="nav-right" index="4">我是商家</el-menu-item>
        <el-submenu index="5" class="nav-right">
          <template slot="title">我的购买</template>
          <el-menu-item index="5-1">收藏夹</el-menu-item>
          <el-menu-item index="5-2">购物车</el-menu-item>
          <el-menu-item index="5-3">订单中心</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>


<script>
  import {APP_TITLE} from '../config'

  export default {
    name: 'nav-bar',
    data() {
      return {
        title: APP_TITLE
      }
    }
  }
</script>


<style lang="scss">
  @import "../assets/scss/color";

  .nav-bar {
    background-color: $theme-color;
    .nav-width {
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
    }
    .nav-right {
      float: right;
    }
  }
</style>
